<template>
  <div class="dolorum p-10">
    首页
    <span>{{ name }}</span>
    <span>{{ counter }}</span>
  </div>

  <van-button type="primary" @click="resetStore">重置store</van-button>
  <van-button type="primary" @click="changeData">+1</van-button>
  <van-button type="primary" @click="toTest2">跳转test2</van-button>

  <Test></Test>
</template>

<script setup lang="ts">
import { useApp } from '@/store/app'

const appStore = useApp()
const { counter, name } = storeToRefs(useApp())
console.log(111)

const router = useRouter()

const changeData = () => {
  appStore.addCounter()
}
const resetStore = () => {
  appStore.$reset()
}
const toTest2 = () => {
  router.push('/test2')
}
</script>

<style scoped lang="scss">
.dolorum {
  font-size: 20px;
  span {
    color: lightblue;
  }
}
</style>
